<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>权限管理 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
    <style>
        .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="3-2" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="权限名称">
                                <el-input v-model="info.name"></el-input>
                            </el-form-item>
                            <el-form-item label="权限设置">
                                <el-tree :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
                                    <div class="custom-tree-node" slot-scope="{ node, data }">
                                        <p>{{ node.label }} {{data.title}}<span style="color: #f6f6f6"> </span></p>
                                        <el-radio-group v-model="data.type" @change="onRadioChange">
                                            <el-radio :label="0">可操作</el-radio>
                                            <el-radio :label="3">只新增</el-radio>
                                            <el-radio :label="1">只读</el-radio>
                                            <el-radio :label="2">不可见</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-tree>
                            </el-form-item>
                            <el-form-item label="权限设置" hidden>
                                <table class="table">
                                    <tr>
                                        <th>操作</th>
                                        <th>权限</th>
                                    </tr>
                                    <tr v-for="(item, index) in list">
                                        <td>{{ item.attrs.title }}</td>
                                        <td>
                                            <el-radio-group v-model="item.attrs.type" @change="onRadioChange">
                                                <el-radio :label="0">可操作</el-radio>
                                                <el-radio :label="1">只读</el-radio>
                                                <el-radio :label="2">不可见</el-radio>
                                            </el-radio-group>
                                        </td>
                                    </tr>
                                </table>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                                <el-button @click="back">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            const data = [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }];
            return {
                data5: JSON.parse('${data!""}'),
                info: {},
                list: [],
                rids: []
            }
        },
        watch: {},
        mounted: function() {},
        methods: {
            getRids(array) {
                for (var idx = 0; idx < array.length; idx++) {
                    var info = array[idx]
                    var resourceId = info.id
                    var type = info.type
                    var model = {
                        resourceId: resourceId,
                        type: type,
                        title:info.title,
                        name:info.name
                    }
                    // console.log(model)
                    this.rids.push(model)
                    var children = info.children
                    if (children != null) {
                        this.getRids(children)
                    }
                }
            },
            submit() {
                var self = this;
                var resources = new Array;
                for (var i = 0; i < self.list.length; i++) {
                    if (self.list[i].attrs.type != null) {
                        resources.push({
                            resourceId: self.list[i].attrs.id,
                            type: self.list[i].attrs.type
                        })
                    }
                }
                var resourceStr = JSON.stringify(resources);
                console.log(this.data5)
                for (var idx = 0; idx < this.data5.length; idx++) {
                    var info = this.data5[idx]
                    var children = info.children
                    this.getRids(children)
                    var resourceId = info.id
                    var type = info.type
                    this.rids.push({
                        resourceId: resourceId,
                        type: type,
                        title:info.title,
                        name:info.name
                    })
                }
                var resourceStr2 = JSON.stringify(this.rids);
                console.log(resourceStr2)
                // console.log(this.rids)
                // console.log(this.data5.length)

                var map = {
                    name: self.info.name,
                    json: resourceStr2,
                    // json2: resourceStr2
                };
                if (self.info.id != null && self.info.id != '') {
                    map['roleId'] = self.info.id;
                }
                var param = Qs.stringify(map);
                // return
                loading();
                axios({
                        url: '/jh/admin/role/submit',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            endLoading();
                            window.location.href = "/jh/admin/role/list";
                            // msg("登录成功");
                        } else {
                            endLoading();
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("提交失败");
                        console.log(error);
                    });
            },
            onRadioChange(val) {
                // console.log(val);
            },
            back() {
                window.history.back();
            }
        }
    })
    </script>
    <script>
        vue.info = ${info!'{}'}
        vue.list = ${items!'[]'}
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .table {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }

    .table tr>td {
        padding: 0 1rem;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>